<template>
  <div id="app">
    <div class="header">
      <div class="box" @click="handeleIndex(index)" :class="{newStyle:currentIndex==index}" v-for="(item,index) in boxArr" :key="index">{{item}}</div>
    </div>

    <div class="banner">
      <tabberLeft></tabberLeft>
      <tabberRight></tabberRight>
    </div>
    <tabberBottom></tabberBottom>
  </div>
</template>

<script>
import tabberRight from "./components/TabberRight.vue"
import tabberBottom from "./components/TabberBottom.vue"
import tabberLeft from "./components/TabberLeft.vue"
export default {
  data(){
    return {
      currentIndex:0,
      boxArr:["搜索","点餐","评价","商家"]
    }
  },
  components:{
    tabberLeft,
    tabberRight,
    tabberBottom
  },
  methods:{
    handeleIndex(index){
      this.currentIndex=index
    }
  }
}
</script>

<style lang="scss" >
*{
  margin: 0;
  padding: 0;
}
#app{
box-sizing: border-box;
padding: 10px;
}
.header{
margin-top: 40px;
display: flex;
}
.box{
  width: 60px;
  font-weight: bolder;
}
.banner{
  display: flex;
}
.newStyle{
  color: rgb(27, 178, 237);
}
</style>
